<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="https://cdn.staticfile.net/vue/3.2.36/vue.global.min.js"></script>
  <!--  <style>-->
  <!--    .class1{-->
  <!--      background: #444;-->
  <!--      color: #eee;-->
  <!--    }-->
  <!--  </style>-->
  <!--</head>-->
  <!--
  vue 指令 是以 v- 开头的属性
  可以在HTML 模版中以 v- 开头的特殊属性形式使用,用于将响应式数据绑定到 DOM 元素上 或在 DOM 元素上触发一些行为
  Vue 指令 是带有前缀 v- 的特殊 Html 属性 赋予HTML 标签额外的功能
  使用 Vue 创建响应式页面要容易得多,并且需要的代码更少

  v-bind 指令 用于绑定一个 DOM 元素的某个特性或属性
  v-if 指令 用于条件渲染 DOM 元素 (用于根据表达式的值来条件性地渲染元素或组件)
  v-show 指令 用于条件显示 DOM 元素 (用于根据表达式的值来条件性地显示或隐藏元素)
  v-for 指令 用于循环渲染 DOM 元素 (用于根据数组或对象的属性值来循环渲染元素或组件)
  v-on 指令 用于监听 DOM 事件 (用于在 DOM 元素上绑定事件监听器)
  v-model 指令 用于双向数据绑定
  v-html 指令 用于将 HTML 内容渲染到 DOM 元素中 (用于将 HTML 内容渲染到 DOM 元素中)
  v-text 指令 用于将文本内容渲染到 DOM 元素中 (用于将文本内容渲染到 DOM 元素中)

  vue3 模版语法
  vue使用了基于HTML的模板语法 允许开发者声明式地将Dom 绑定至底层 vue实例的数据
  vue的核心是一个允许你采用简洁的模版语法来声明式的将数据渲染进dom的系统
  结合响应系统 在应用状态改变时 vue能够智能地计算出重新渲染组件的最小代价 并应用到 dom 操作上


  -->
<body>
<!--参数 在指令后以冒号指明. 例如 v-bind指令被用来响应地更新HTML属性 -->
<!--在这里href是参数 告知v-bind指令 将该元素的href属性与表达式 url的值绑定 -->
<!--v-on指令 用于监听Dom事件-->
<!--
完整语法
<a v-on:click="doSomething"></a>
缩写语法
<a @click="doSomething"></a>
动态参数的缩写 (2.6.0+)
<a @[event]="doSomething"></a>
这里参数是监听的事件名 事件监听器会在事件发生时被调用

修饰符 是以半角句号 . 指明的特殊后缀, 用于指出一个指令应该以特殊的方式绑定
例如 .prevent 修饰符告诉 v-on 指令对触发的事件调用 event.preventDefault() 方法

缩写
v-bind 缩写  Vue.js 为两个最为常用的指令提供了特别的缩写
完整语法
<a v-bind:href="url"></a>
缩写
<a :href="url"></a>

v-on 缩写
完整语法
<a v-on:click="doSomething"></a>
缩写
<a @click="doSomething"></a>

vue3 条件语句
在vue3中,你可以在模板中使用多种条件语句来控制组件的渲染
主要的条件语句有
  v-if 指令 元素在条件为false时不会被渲染到Dom中 适用于条件不频繁的情况
  v-show 指令 元素总是渲染到Dom中 适用于条件频繁的情况 切换显示隐藏性能更好
  v-else-if 和 v-else 指令 用于处理多个条件分支,配合 v-if使用

Vue.js 循环语句
在 vue中 循环语句主要通过 v-for指令 来实现,用于遍历数组或对象,生成对应数量的元素
在元素上使用 v-for 指令 根据源数据的数组或对象进行循环渲染元素
遍历数组
v-for ="(item,index) in items"
遍历对象
v-for ="(value,key,index) in object"

key的作用 使用 v-for 渲染列表时,必须为每个项提供一个唯一的 key属性,以便Vue能够识别每个项的唯一性,从而进行高效的Dom更新
嵌套循环: 可以嵌套使用多个 v-for 来渲染多维数组或对象结构

在组件上使用 v-for 指令 在自定义组件上 可以像 在任何普通元素上一样使用 v-for 指令
然而 任何数据不会被自动传递到组件里 因为组件有自己独立 的作用域 ,为了把迭代数据传递到组件里,我们要使用 props

<my-component
v-for="(item,index) in items"
:item="item"
:index="index"
:key="item.id"
></my-component>

不自动将item 注入到组件里的原因是,这会使得组件与v-for的运作紧密耦合,明确组件数据的来源能够使组件在其他场合重复使用


-->
<!--todo列表 -->
<div id="todo-list-example">
  <form v-on:submit.prevent="addNewTodo">
    <label for="new-todo">添加 todo: </label>
    <input v-model="newTodoText" id="new-todo" placeholder="例如: 明天早上跑步"/>
    <button>添加</button>
  </form>
  <ul>
    <todo-item
      v-for="(todo,index) in todos"
      :key="todo.id"
      :title="todo.title"
      @remove="todos.splice(index,1)"
    ></todo-item>
  </ul>
</div>

<script>
  const app = Vue.createApp(
    {
      data() {
        return {
          newTodoText: '',
          todos: [
            {
              id: 1,
              title: '学习 JavaScript'
            },
            {
              id: 2,
              title: '学习 Vue'
            },
            {
              id: 3,
              title: '吃饭'
            }
          ],
          nextTodoId: 4
        }
      },
      methods: {
        addNewTodo() {
          this.todos.push({
            id: this.nextTodoId++,
            title: this.newTodoText
          })
          this.newTodoText = ''
        }
      }
    })

  app.component('todo-item', {
    template: `
    <li>
      {{ title }}
      <button @click="$emit('remove')">删除</button>
    </li>
  `,
    props: ['title'],
    emits: ['remove']
  })

  app.mount('#todo-list-example')
</script>

<!--v-for/v-if 联合使用 给select 设置默认值-->
<!--<div id="app">-->
<!--  <select @change="changeVal($event)" v-model="selOption">-->
<!--    <template v-for="(site,index) in sites":site="site":index="index" :key="site.id">-->
<!--&lt;!&ndash;      索引为1的设为默认值,索引值从0开始&ndash;&gt;-->
<!--      <option v-if = "index==1":value="site.name" selected>{{site.name}}</option>-->
<!--      <option v-else :value="site.name">{{site.name}}</option>-->
<!--    </template>-->
<!--  </select>-->
<!--  <div>您选择了:{{selOption}}</div>-->
<!--</div>-->
<!--<script>-->
<!--  const app = {-->
<!--    data() {-->
<!--      return {-->
<!--        selOption: "Runoob",-->
<!--        sites: [-->
<!--          {id:1,name:"Google"},-->
<!--          {id:2,name:"Runoob"},-->
<!--          {id:3,name:"Taobao"}-->
<!--        ]-->
<!--      }-->
<!--    },-->
<!--    methods:{-->
<!--      changeVal:function (event){-->
<!--        this.selOption = event.target.value;-->
<!--        alert("你选中了"+this.selOption);-->
<!--      }-->
<!--    }-->
<!--  }-->
<!--  Vue.createApp(app).mount('#app')-->
<!--</script>-->

<!--v-for 可以通过一个对象的属性来迭代数据-->
<!--显示过滤/排序后的结果 我们可以对数组的元素进行处理后再显示出来,一般可以通过创建一个计算属性,来返回过滤或排序后的数组-->
<!--<div id="app">-->
<!--  <ul>-->
<!--    <li v-for="n in evenNumbers">{{n}}</li>-->
<!--  </ul>-->
<!--</div>-->
<!--<script>-->
<!--  const app = {-->
<!--    data() {-->
<!--      return {-->
<!--        numbers: [1,2,3,4,5]-->
<!--      }-->
<!--    },-->
<!--    computed: {-->
<!--      evenNumbers() {-->
<!--        return this.numbers.filter(number => number % 2 === 0)-->
<!--      }-->
<!--    }-->
<!--  }-->
<!--  Vue.createApp(app).mount('#app')-->
<!--</script>-->


<!--v-for循环整数-->
<!--<div id="app">-->
<!--  <ul>-->
<!--    <li v-for="n in 10">-->
<!--      {{n}}-->
<!--    </li>-->
<!--  </ul>-->
<!--</div>-->

<!--<script>-->
<!--  Vue.createApp(app).mount('#app')-->
<!--</script>-->

<!--可以提供第二个的参数为键名-->
<!--第三个参数为索引-->
<!--<div id="app">-->
<!--  <ul>-->
<!--    <li v-for="(value,key,index) in object">-->
<!--      {{index}}.{{key}}:{{value}}-->
<!--    </li>-->
<!--  </ul>-->
<!--</div>-->

<!--<script>-->
<!--  const app = {-->
<!--    data() {-->
<!--      return {-->
<!--        object:{-->
<!--          name : '菜鸟教程',-->
<!--          url : 'https://www.runoob.com',-->
<!--          slogan: '学的不仅仅是技术,更是梦想!'-->
<!--        }-->
<!--        }-->
<!--      }-->
<!--    }-->
<!--  Vue.createApp(app).mount("#app")-->
<!--</script>-->

<!--v-for 实例 可以绑定数据到数组来渲染一个列表-->
<!--v-for 还支持一个可选的第二个参数,参数值为当前项的索引-->
<!--多个模板中使用 templates 模板-->
<!--<div id="app">-->
<!--  <ul>-->
<!--    <template v-for="site in sites">-->
<!--      <li>{{site.text}}</li>-->
<!--      <li>-&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;</li>-->
<!--    </template>-->
<!--  </ul>-->
<!--&lt;!&ndash;  <ol>&ndash;&gt;-->
<!--&lt;!&ndash;    <li v-for="(site,index) in sites">&ndash;&gt;-->
<!--&lt;!&ndash;      {{index}} -{{site.text}}&ndash;&gt;-->
<!--&lt;!&ndash;    </li>&ndash;&gt;-->
<!--&lt;!&ndash;  </ol>&ndash;&gt;-->
<!--</div>-->

<!--<script>-->
<!--  const app = {-->
<!--    data() {-->
<!--      return {-->
<!--        sites: [-->
<!--          {text:'Google'},-->
<!--          {text:'Baidu'},-->
<!--          {text:'Taobao'}-->
<!--        ]-->
<!--      }-->
<!--    }-->
<!--  }-->
<!--  Vue.createApp(app).mount("#app")-->
<!--</script>-->

<!--v-if 根据表达式的真假条件性渲染元素 如果表达式为真,则渲染该元素,如果为假,则不渲染 (不会在Dom中生成该元素)-->
<!--条件判断使用 v-if指令 指令的表达式返回true时才会显示-->
<!--v-if 指令将根据表达式 seen的值(true 或 false)来决定是否插入 p元素-->
<!--因为v-if 是一个指令,所以必须将它添加到一个元素上,如果是多个元素,可以包裹在 <template> 元素上,并在上面使用 v-if.最终的渲染结果将不包含 <template>元素 -->

<!--v-show 根据表达式的真假条件性地显示 或隐藏元素, 与v-if不同的是 v-show始终 会在dom中保留元素 ,只是通过css的display 属性控制元素的显示和隐藏-->
<!--如果需要频繁切换元素的显示与隐藏,推荐使用 v-show 因为v-show 只是简单地切换 css 样式,而不是重新渲染整个元素-->
<!--<div>-->
<!--  <h1 v-show="ok">Hello!</h1>-->
<!--</div>-->
<!--<script>-->
<!--  const app = {-->
<!--    data() {-->
<!--      return {-->
<!--        ok: true-->
<!--      }-->
<!--    }-->
<!--  }-->
<!--  Vue.createApp(app).mount("#app")-->
<!--</script>-->

<!--v-else-if 在v-if和v-else 之间添加额外的条件判断,可以连续使用多个 v-else-if-->
<!--注意: v-else,v-else-if 必须跟在 v-if 或者 v-else-if 之后使用-->
<!--<div id="app">-->
<!--  <div v-if="type ==='A'">-->
<!--    A-->
<!--  </div>-->
<!--  <div v-else-if="type ==='B'">-->
<!--    B-->
<!--  </div>-->
<!--  <div v-else-if="type ==='C'">-->
<!--    C-->
<!--  </div>-->
<!--  <div v-else>-->
<!--    Not A/B/C-->
<!--  </div>-->
<!--</div>-->

<!--<script>-->
<!--  const app = {-->
<!--    data() {-->
<!--      return {-->
<!--        type: 'C'-->
<!--      }-->
<!--    }-->
<!--  }-->
<!--  Vue.createApp(app).mount("#app")-->
<!--</script>-->


<!--v-else 与 v-if 搭配使用,表示在前一个 v-if 表达式为假时渲染的元素,可以用v-else指令 给v-if 添加一个 else 块-->
<!--v-else 指令 随机生成一个数字,判断是否大于0.5,然后输出对应信息 -->
<!--<div id="app">-->
<!--  <div v-if="Math.random() > 0.5">-->
<!--    随机数大于 0.5-->
<!--  </div>-->
<!--  <div v-else>-->
<!--    随机数小于等于 0.5-->
<!--  </div>-->
<!--</div>-->
<!--<script>-->
<!--  Vue.createApp(app).mount("#app")-->
<!--</script>-->


<!--多个元素判断-->
<!--<div id="app">-->
<!--  <template v-if="seen">-->
<!--    <h1>网站</h1>-->
<!--    <p>Google</p>-->
<!--    <p>Runoob</p>-->
<!--    <p>Taobao</p>-->
<!--  </template>-->
<!--</div>-->

<!--<script>-->
<!--  const app = {-->
<!--    data() {-->
<!--      return {-->
<!--        seen: true // 改为 false,信息就无法显示-->
<!--      }-->
<!--    }-->
<!--  }-->
<!--  Vue.createApp(app).mount("#app")-->
<!--</script>-->

<!--单个元素判断-->
<!--<div id="app">-->
<!--  <p v-if="seen">现在你看到我了</p>-->
<!--</div>-->
<!--<script>-->
<!--  const app = {-->
<!--    data() {-->
<!--      return{-->
<!--        seen: true //改为 false,信息就无法显示-->
<!--      }-->
<!--    }-->
<!--  }-->
<!--  Vue.createApp(app).mount("#app")-->
<!--</script>-->


<!--字符串反转 通过按钮的事件可以使用 v-on监听事件 并对用户的输入进行响应-->
<!--<div id="app">-->
<!--  <p>{{message}}</p>-->
<!--  <button v-on:click="reverseMessage">反转字符串</button>-->
<!--</div>-->
<!--<script>-->
<!--  const app = {-->
<!--    data() {-->
<!--      return {-->
<!--        message:'Runoob!'-->
<!--      }-->
<!--    },-->
<!--    methods:{-->
<!--      reverseMessage() {-->
<!--        this.message = this.message.split('').reverse().join('')-->
<!--      }-->
<!--    }-->
<!--  }-->
<!--  Vue.createApp(app).mount("#app")-->
<!--</script>-->


<!--用户输入 在input输入框中我们可以使用 v-model指令 来实现双向数据绑定-->
<!--<div id="app">-->
<!--  <p>{{message}}</p>-->
<!--  <label>-->
<!--    <input v-model="message">-->
<!--  </label>-->
<!--</div>-->
<!--<script>-->
<!--  const app = {-->
<!--    data() {-->
<!--      return {-->
<!--        message: 'Runoob!'-->
<!--      }-->
<!--    }-->
<!--  }-->
<!--  Vue.createApp(app).mount("#app")-->
<!--</script>-->


<!--<form v-on:submit.prevent="onSubmit"></form>-->
<!--<div id="app">-->
<!--  <p><a v-bind:href="url">菜鸟教程</a></p>-->
<!--</div>-->
<!--<script>-->
<!--  const app = {-->
<!--    data() {-->
<!--      return {-->
<!--        url: 'https://www.runoob.com'-->
<!--      }-->
<!--    }-->
<!--  }-->
<!--  Vue.createApp(app).mount("#app")-->
<!--</script>-->


<!--使用 v-for指令可以绑定数组的数据来渲染一个项目列表-->
<!--<div id="app">-->
<!--  <ol>-->
<!--    <li v-for="site in sites">-->
<!--      {{site.text}}-->
<!--    </li>-->
<!--  </ol>-->
<!--</div>-->
<!--<script>-->
<!--  const app = {-->
<!--    data () {-->
<!--      return {-->
<!--        sites : [-->
<!--          {text:"Google"},-->
<!--          {text:"Facebook"},-->
<!--          {text:"Twitter"}-->
<!--        ]-->
<!--      }-->
<!--    }-->
<!--  }-->
<!--  Vue.createApp(app).mount("#app")-->
<!--</script>-->

<!--指令 是带有v-前缀的特殊属性. 指令用于在表达式的值改变时,将某些行为应用到dom上 -->
<!--v-if 指令将根据表达式seen的值 true或 false 来决定是否插入p元素-->
<!--<div id="app">-->
<!--  <p v-if="seen">现在你看到我了</p>-->
<!--</div>-->
<!--<script>-->
<!--  const app = {-->
<!--    data() {-->
<!--      return {-->
<!--        seen: true //改为 false,信息就无法显示-->
<!--      }-->
<!--    }-->
<!--  }-->
<!--  Vue.createApp(app).mount("#app")-->
<!--</script>-->


<!--vue.js 提供了完全的 js表达式支持, 表达式会在当前活动实例的数据作用域下作为 js被解析,每个绑定都只能包含单个表达式-->
<!--这是语句 不是表达式: {{var a = 1}}-->
<!--流控制也不会生效,请使用三元表达式 :{{ if (ok){return message} }}-->
<!--<div id="app">-->
<!--  {{5 + 5}} <br>-->
<!--  {{ok ? 'YES' : 'NO'}} <br>-->
<!--  {{message.split('').reverse().join('')}}-->
<!--  <div v-bind:id="'list-'+id">菜鸟教程</div>-->
<!--</div>-->
<!--<script>-->
<!--  const app = {-->
<!--    data() {-->
<!--      return {-->
<!--        ok: true,-->
<!--        message:'RUNOOB!!',-->
<!--        id: 1-->
<!--      }-->
<!--    }-->
<!--  }-->
<!--  Vue.createApp(app).mount("#app")-->
<!--</script>-->


<!--判断use的值, 如果true 使用class1 类的样式, 否则不使用该类-->
<!--<div id="app">-->
<!--  <label for="r1">修改颜色</label>-->
<!--  <input type="checkbox" v-model="use" id="r1">-->
<!--  <br><br>-->
<!--  <div v-bind:class="{'class1':use}">-->
<!--    v-bind:class指令-->
<!--  </div>-->
<!--</div>-->
<!--<script>-->
<!--  const app = {-->
<!--    data() {-->
<!--      return {-->
<!--        use: false-->
<!--      }-->
<!--    }-->
<!--  }-->
<!--  Vue.createApp(app).mount("#app")-->
<!--</script>-->

<!--插值: Html 使用v-html指令用于输出 html代码 -->
<!--属性 html属性中的值应使用 v-bind 指令  v-bind:id="dynamicId"-->
<!--对于布尔值,常规值为 true或 false 如果属性值为null 或 undefined, 则该属性不会显示出来 -->
<!--如果isButtonDisabled 的值 null 或 undefined,则 disabled 属性甚至不会被包含渲染出来的 button 元素-->

<!--<div id="example1" class="demo">-->
<!--  <p>使用双大括号的文本插值: {{rawHtml}}</p>-->
<!--  <p>使用 v-html 指令: <span v-html="rawHtml"></span></p>-->
<!--</div>-->
<!--<script>-->
<!--  const RenderHtmlApp = {-->
<!--    data() {-->
<!--      return {-->
<!--        rawHtml: '<span style="color:red">这里会显示红色!</span>'-->
<!--      }-->
<!--    }-->
<!--  }-->
<!--  Vue.createApp(RenderHtmlApp).mount("#example1")-->
<!--</script>-->

<!--插值 : 文本数据绑定最常见的形式就是使用 {{...}} 双大括号的文本插值 -->
<!--{{...}}标签的内容将会被替代为对应组件实例中message属性的值,如果message属性的值发生了改变,{{...}}标签内容也会更新-->
<!--如果不想改变标签内容,可以通过使用v-once指令执行一次性地插值,当数据改变时,插值处的内容不会更新-->
<!--<div id="hello-vue" class="demo">{{ message }}</div>-->
<!--<script>-->
<!--  const HelloVueApp = {-->
<!--    data() {-->
<!--      return {-->
<!--        message: 'Hello Vue3!'-->
<!--      }-->
<!--    }-->
<!--  }-->
<!--  Vue.createApp(HelloVueApp).mount('#hello-vue')-->
<!--</script>-->

<!--v-show 指令 用于条件显示 DOM 元素,显示或隐藏元素-->
<!--<div id="hello-vue" class="demo">-->
<!--  <button v-on:click="showMessage =!showMessage">显示/隐藏</button>-->
<!--  <p v-show="showMessage">Hello Vue!</p>-->
<!--</div>-->
<!--<script>-->
<!--  const HelloVueApp = {-->
<!--    data() {-->
<!--      return {-->
<!--        showMessage: true-->
<!--      }-->
<!--    }-->
<!--  }-->
<!--  Vue.createApp(HelloVueApp).mount('#hello-vue')-->
<!--</script>-->


<!--v-on 指令在Html 元素上绑定 开关按钮-->
<!--<div id="app">-->
<!--  <div id="lightDiv">-->
<!--    <div v-show="lightOn">-->
<!--      <img src="pic.png" alt="logo">-->
<!--    </div>-->
<!--  </div>-->
<!--  <button v-on:click="lightOn=!lightOn">开/关</button>-->
<!--</div>-->
<!--<script>-->
<!--  const app = Vue.createApp({-->
<!--    data() {-->
<!--      return {-->
<!--        lightOn: false-->
<!--      }-->
<!--    }-->
<!--  })-->
<!--  app.mount('#app')-->
<!--</script>-->


<!--v-for 指令根据数组的属性值循环渲染元素或组件-->
<!--<div id="app" class="demo">-->
<!--  <ul>-->
<!--    <li v-for="item in items" :key="item.id">-->
<!--      {{item.text}}-->
<!--    </li>-->
<!--  </ul>-->
<!--</div>-->

<!--<script>-->
<!--  const HelloVueApp = {-->
<!--    data() {-->
<!--      return {-->
<!--        items: [-->
<!--          {id: 1, text: 'Item 1'},-->
<!--          {id: 2, text: 'Item 2'},-->
<!--          {id: 3, text: 'Item 3'}-->
<!--        ]-->
<!--      }-->
<!--    }-->
<!--  }-->
<!--  Vue.createApp(HelloVueApp).mount('#app')-->
<!--</script>-->

<!--v-if和v-else 指令根据表达式的值来条件性地渲染元素或组件-->
<!--<div id="app" class="demo">-->
<!--  <p v-if="showMessage">Hello Vue!</p>-->
<!--  <p v-else>Goodbye Vue!</p>-->
<!--</div>-->
<!--<script>-->
<!--  const HelloVueApp = {-->
<!--    data() {-->
<!--      return {-->
<!--        showMessage: true-->
<!--      }-->
<!--    }-->
<!--  }-->
<!--  Vue.createApp(HelloVueApp).mount('#app')-->
<!--</script>-->

<!--v-bind 指令将Vue实例数据绑定-->
<!--<div id="app" class="demo">-->
<!--  <img v-bind:src="imageSrc">-->
<!--</div>-->
<!--<script>-->
<!--  const HelloVueApp = {-->
<!--    data() {-->
<!--      return {-->
<!--        imageSrc: 'pic.png'-->
<!--      }-->
<!--    }-->
<!--  }-->
<!--  Vue.createApp(HelloVueApp).mount('#app')-->
<!--</script>-->

<!--v-model 指令实现表单数据双向绑定-->
<!--<div id="app" class="demo">-->
<!--  <label>-->
<!--    <input type="text" v-model="message">-->
<!--  </label>-->
<!--  <p>{{message}}</p>-->
<!--</div>-->
<!--<script>-->
<!--  const HelloVueApp = {-->
<!--    data() {-->
<!--      return {-->
<!--        message: 'Hello Vue!'-->
<!--      }-->
<!--    }-->
<!--  }-->
<!--  Vue.createApp(HelloVueApp).mount('#app')-->
<!--</script>-->
</body>
</html>
